<template>
    <div class="main-layout">
        <!-- 侧栏 -->
        <div class="sidebar">
            <div class="nav-buttons">
                <!-- 主页按钮 -->
                <var-button class="nav-btn" type="primary" @click="navigateTo('home')"
                    :class="{ active: currentRoute === 'home' }">
                    <var-icon name="home" />
                    主页
                </var-button>

                <!-- 历史记录按钮 -->
                <var-button class="nav-btn" type="primary" @click="navigateTo('history')"
                    :class="{ active: currentRoute === 'history' }">
                    <var-icon name="history" />
                    历史记录
                </var-button>

                <!-- 个人信息按钮 -->
                <var-button class="nav-btn" type="primary" @click="navigateTo('information')"
                :class="{ active: currentRoute === 'information' }">
                    <var-icon name="account-circle" />
                    个人信息
                </var-button>
            </div>

            <!-- 退出登录按钮 -->
            <div class="logout-section">
                <var-button class="logout-btn" type="danger" @click="handleLogout">
                    <var-icon name="logout" />
                    退出登录
                </var-button>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="content-area">
            <router-view />
        </div>
    </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import authentication from '@/utils/authentication'
import { Snackbar } from '@varlet/ui'

export default {
    name: 'MainLayout',
    setup() {
        const router = useRouter()
        const route = useRoute()

        // 当前路由名称
        const currentRoute = computed(() => route.name)

        // 导航到指定路由
        const navigateTo = (routeName) => {
            router.push({ name: routeName })
        }

        // 处理退出登录
        const handleLogout = () => {
            // 显示退出登录提示
            Snackbar({
                content: '已退出登录',
                type: 'success'
            })
            // 清除token
            authentication.removeToken()
            // 延迟跳转到登录页
            setTimeout(() => {
                router.push({ name: 'auth' })
            }, 1000)
        }

        return {
            currentRoute,
            navigateTo,
            handleLogout
        }
    }
}
</script>

<style scoped>
.main-layout {
    display: flex;
    height: 100vh;
    width: 100%;
}

.sidebar {
    width: 200px;
    background-color: #e3f2fd;
    /* 浅蓝色背景 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.nav-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.nav-btn {
    width: 100%;
    background-color: white !important;
    color: #1976d2 !important;
    border: 1px solid #e0e0e0;
    justify-content: flex-start;
    padding: 12px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background-color: #f5f5f5 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.nav-btn.active {
    background-color: #1976d2 !important;
    color: white !important;
}

.nav-btn .var-icon {
    margin-right: 8px;
}

.logout-section {
    margin-top: auto;
}

.logout-btn {
    width: 100%;
    background-color: #f44336 !important;
    color: white !important;
    border: none;
    justify-content: flex-start;
    padding: 12px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.logout-btn:hover {
    background-color: #d32f2f !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.logout-btn .var-icon {
    margin-right: 8px;
}

.content-area {
    flex: 1;
    background-color: #fafafa;
    overflow-y: auto;
}
</style>